<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0;">
            <van-row justify="center">
                <van-col span="20">
                    <van-search
                        v-model="search"
                        shape="round"
                        background="#008CA0"
                        placeholder="请输入产品名称"
                        @search="searchResult"
                    />
                </van-col>
            </van-row>
        </div>
        <div>
            <van-nav-bar
            :title="secondTitle"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
    </div>
    <div style="margin: 1rem;">
        <van-cell-group>
        <van-cell 
        v-for="(item, index) in productListData" 
        :key="index" 
        :title="item.title" 
        :value="`价格：￥` +  item.price" 
        :label="item.serial" 
        @click="()=>router.push({path: '/m/productDetail', query: {'id': item.id}})"
        size="large"
        />
        </van-cell-group>        
    </div>
</template>


<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { getProductBySecond } from "@/requests/index";
const search = ref();
const route = useRoute();
const router = useRouter();
const secondTitle = ref();
secondTitle.value = route.query.title;
const onClickLeft = () => history.back();

// 获取产品列表
const productListData = ref();
const forProductListData = async(id)=>{
    const res = await getProductBySecond({"id": id});
    if (res.status === 2000) {
        productListData.value = res.data.data;
  } else {
        console.log("获取二级分类列表失败")
  };
};
forProductListData(route.query.id);
// 搜索
const searchResult = ()=>{
    router.push({path: '/m/search', query: {content: search.value}})
}
</script>
<style scoped>

</style>